<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="<%=request.getContextPath()%>/image/LOGO.png" type="image/x-icon" />
<title>病案图像查询</title> 
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:0" >
	<div data-options="region:'north',split:false" class="north-min" style="border-left:0">
		<span class="paddingTBL">
			<span>您正在阅读病案&nbsp;&nbsp;</span>
			<span>病案号  </span>&nbsp;<span class="shootFontBold" id="Preview_fprn"></span>&nbsp;&nbsp;
			<span>住院ID</span>&nbsp;<span class="shootFontBold" id="Preview_fzyid"></span>&nbsp;&nbsp;
			<span>住院次数  </span>&nbsp;<span class="shootFontBold" id="Preview_ftimes"></span>&nbsp;&nbsp;
			<span>姓名  </span>&nbsp;<span class="shootFontBold" id="Preview_fname"></span>&nbsp;&nbsp;
			<span>出院日期  </span>&nbsp;<span class="shootFontBold" id="Preview_fcydate"></span>
		</span>
	</div>
	<div data-options="region:'west',split:false" style="width:20%;" class="Cancel_borderLB">
		<ul id="PicturePreview_tree"></ul>
	</div>
	<div data-options="region:'east',split:false" style="width:80%;overflow:hidden;border-bottom:0">
	    <div class="easyui-layout" data-options="fit:true">
		      <div id="module-info" data-options="region:'north',split:false" class="north-min" style="display:none;text-align:center;padding-bottom:4px;border-left:0;">   
					<span>当前模块：</span>
				    <span id="currentModel" class="shootFontBold"></span>
			  </div>
			  <div id="picture-region" data-options="region:'center',split:false" style="display:none;border:0px solid red">
					<div id="PicturePreviewSlider" ><ul></ul></div> 
					<!-- 遮盖层 star-->
					<div id="bgSliderIMG"> 
						<img src="<%=request.getContextPath()%>/image/closed.png" style="float:right;cursor: pointer;" onclick="closed()">
					</div>
					<div id="ShowSliderIMG"></div>
					<!-- 遮盖层 end--> 
			  </div>
		</div> 
		
		<!-- <div class="lightbox" id="lightbox"></div> -->
		<div id="pop" class="pop" style="width:99%;height:99%;">
		       <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer" scrolling="no" style="width:99%; height:99%;"></iframe>
		</div> 
    </div>
</div>
<%-- <script type="text/javascript" src="<%=request.getContextPath()%>/js/ShootRecord/PicturePreview.js"></script> --%>
  
<script type="text/javascript">
	var fprn = '<%=request.getParameter("fprn")%>';
	var fzyid = '<%=request.getParameter("fzyid")%>';
	var ftimes = '<%=request.getParameter("ftimes")%>';
	var fname = decodeURI('<%=request.getParameter("fname")%>');
	var fcydate = '<%=request.getParameter("fcydate")%>';
	var fcode =$("#fcode").text(); //获取当前用户code
	$("#Preview_fprn").html(fprn);
	$("#Preview_fzyid").html(fzyid);
	$("#Preview_ftimes").html(ftimes);
	$("#Preview_fname").html(fname);
	$("#Preview_fcydate").html(fcydate);
	
	$(function(){  
		//获取树节点
		 $("#PicturePreview_tree").tree({  
		    url: ctx + "/MedicalShootManage/tree",  
		    animate: true,
		    checkbox: false,
		    queryParams: {
		    	"fzyid": fzyid
		    },
		    formatter:function(node){
		    	if (node.fileName) {
		    		return "<a style=\"text-decoration: none; color: black; display: block;\" href=\"thirdparty/pdfjs/web/viewer.html?file=../../../file/"+ node.fileName +".pdf#page=" + (node.text) + "\" target=\"pdfContainer\" onclick=\"showPdf(true)\">" + "第" + node.text + "页" + "</a>";
		    	}
				return node.text;
			},
		    onSelect:function(node) {
		    	document.getElementById("bgSliderIMG").style.display ="none";  
			    document.getElementById("ShowSliderIMG").style.display ="none"; 

			    if (node.type == 1){ //if (node.fileType) {
		    		$("#module-info").css("display", "none");
		    		$("#picture-region").css("display", "none");
		    		$("#pop").css("display", "block");
		    	} else {
		    		if(node.text != "病案封面") {
		    			$("#module-info").css("display", "block");
			    		$("#picture-region").css("display", "block");
			    		$("#pop").css("display", "none");
			    		
				    	//点击分为两种情况：情景一，直接点击图片;情景二：点击二级菜单;
						var id = node.id; 	//id绑定了图片编号
						var imgNumber = id.substring(id.lastIndexOf(",") + 1,id.length);	//拆分图片编号
				    	if(!node.children){  	//情景一
				    		var src = node.attributes;
				    		var isMore = false; //为false，则表示
				    		 $.ajax({
				 	    		url: ctx + "/MedicalShootManage/encodeIMG",
				 	    		dataType : 'json',
				 	    		type : 'post',
				 	    		data:{
				 	    			"path" : src,
				 	    			"isMore" : isMore
				 	    		},
				 	    		success:function(data){
				 	    			if(data.msg == true){
				 	    				$("#PicturePreviewSlider").siblings("a").remove(); //先清空插件的元素
				 	    				
				 	    				if(src.substring(src.lastIndexOf(".")+1,src.length) == "jpg"){
							    			var parent = $("#PicturePreview_tree").tree("getParent",node.target);
							    			var pageNumber = node.text;
							    			var path = node.attributes;
							    			var parentText = parent.text;//父类标题
							    			$("#currentModel").html(parentText);
							    			var cateNumber = parent.attributes;//图片分类编码
							    			var src2 = src.replace(/\\/g,'/');
							    			var index = src2.lastIndexOf("/");
							    			var imgSrc = src2.substring(index+1,src.length);
							    			var srcPath=ctx + "/upload/"+fcode+"/"+imgSrc; 
							    			$("#PicturePreviewSlider").html( 
							    					  "<div class='wrapper'>"
							   			           		 + "<div id='picpViewer' class='viewer'></div><br/>"
							   			            + "</div>"  
							    					 
							    					+ "<div class='caption'>" +
							    							"<span class='PageNumber'>"+pageNumber+"&nbsp;"+parentText+"&nbsp;"+imgSrc+"</span>" +
							    							"<span class='auditImgNumber' style='display:none;'>"+imgNumber+"</span>" +
							    							"<span class='imgCategory' style='display:none;'>"+cateNumber+"</span>" +
							    							"<span class='imgPath' style='display:none;'>" + path + "</span>" +
							    							"<span class='pageCode' style='display:none;'>" + pageNumber + "</span>" +
							    					   "</div>" );  
							    			
							    			 $("#PicturePreviewSlider").removeClass("slide");
 							    			 slider_picpViewer("picpViewer",srcPath);
							    			 
							 			 	if(!node.children){ 
							 					$(".slide_nav").css("display",'none')
							 				}  
							    			//slider(); //渲染特效 
							    			/* $('#PreviewRoll').zoom({ on:'click' }); */
							    		}
				 	    			}else{
				 	    				$.messager.alert("提示","解解密图片操作异常,请联系管理员！","info");
				 	    			}				 	    			
				 	    		},
				 	    		error:function(){
				 	    			$.messager.alert("提示","解密图片操作异常,请联系管理员！","info");
				 	    		}
				 	    	});  
				    	} else {  //情景二
				    		putImg(node);
				    	}
					}
		    	}
		    	
			}
		});	 
	});
	
	
	//显示PDF
	function showPdf(isShow){ 
		var state = "";
		if(isShow){
			state = "block";
		}else{
			state = "none";
		}
		var pop = document.getElementById("pop");
		pop.style.display = state;
		/* var lightbox = document.getElementById("lightbox");
		lightbox.style.display = state; */
	}
	function close(){
		showPdf(false);
	}
	 
	
	//关闭遮盖层
	function closed(){  
		document.getElementById("bgSliderIMG").style.display ="none";  
	    document.getElementById("ShowSliderIMG").style.display ="none";  
	}
	
	//打开遮盖层
	function imgClick(srcPath){ 
	  //var srcPath = $("li").find('img').prop("src"); 
	  document.getElementById("bgSliderIMG").style.display ="block"; 
	  document.getElementById("ShowSliderIMG").style.display ="block"; 
	  $("#ShowSliderIMG").html("");   //先清空
	  $("#ShowSliderIMG").html(
			    "<div class='wrapper'>"
	          	+ "<div id='ShowSliderIMG_iviewer' class='viewer iviewer_cursor'></div><br/>"
	            + "</div>" ); 
	  
	  slider_picpViewer("ShowSliderIMG_iviewer",srcPath);
	}
	
	//鼠标滚动_图片放大效果层
	function slider_picpViewer(iviewerId,srcPath){   
		  var $PA = jQuery; 
		  var viewer;
          viewer = $PA("#"+iviewerId).iviewer({
        	  src:srcPath
          });
	 
		/*  var $PA = jQuery; 
	     var iviewer = {};
	     $PA("#"+iviewerId).iviewer({
		      src:srcPath,
		      zoom: "fit",
		      zoom_min:30,
		      zoom_max: 400,
		      initCallback: function()
		      {   
		        iviewer = this;
		      } 
	     });  */
	}   
	
	function slider(){
	    $("#PicturePreviewSlider").responsiveSlides({
		    auto: false,
		    pager: false,
		    nav: true,
		    speed: 500,
		    // 对应外层div的class : slide_container
		    namespace: "slide"
		});
	}
	
	//放置图片至浏览区域
	function putImg(node){
		var imgName = "";
		var html = "";
		var parent = $("#PicturePreview_tree").tree("getNode",node.target);
		var parentText = parent.text;//父类标题
		var cateNumber = parent.attributes;//图片分类编码
		var parentChildren = parent.children;//父类的子节点数组
		$("#currentModel").html(parentText);
		var path = "";
		var isMore = true; //为true，则解密多个
		for (var j = 0; j < parentChildren.length; j++) {
			var originPath = parentChildren[j].attributes; //图片路径
			if(j >0){
				path += ","+originPath;
			}else{
				path += originPath;
			}
		}
		$.ajax({
			url: ctx + "/MedicalShootManage/encodeIMG",
			dataType : "json",
			type : "post",
			data : {
				"path" :path,
				"isMore" : isMore
			},
			success:function(data){ 
				document.getElementById("bgSliderIMG").style.display ="none";  
			    document.getElementById("ShowSliderIMG").style.display ="none"; 
			 
				if(data.msg == true){ 
					$("#PicturePreviewSlider").siblings("a").remove(); //先清空插件的元素
					$("#PicturePreviewSlider").html("");
					//循环获取子节点
					for (var i = 0; i < parentChildren.length; i++) {
						var src = parentChildren[i].attributes; //图片路径
						var pageNumber = parentChildren[i].text;//图片页码
						var id = parentChildren[i].id; //图片编号
						//拆分图片编号
						var imgNumber = id.substring(id.lastIndexOf(",")+1,id.length);
						//截取图片路径
						var src2 = src.replace(/\\/g,'/');
						var index = src2.lastIndexOf("/");
						var imgSrc = src2.substring(index+1,src.length);
						var srcPath=ctx + "/upload/"+fcode+"/"+imgSrc;
						html += "<li>"  
							        + "<img src='"+ ctx + "/upload/"+fcode+"/"+imgSrc+"' onclick=imgClick('"+srcPath+"')>" 
									/*+"<div class='wrapper'>"
					        		+"<div id='picpViewer"+i+"'"+" class='viewer iviewer_cursor' style='height:99%;overflow:scroll;'></div><br/>"
					                +"</div>" */
									+"<div class='caption'>" +
										"<span class='PageNumber'>" + pageNumber + "&nbsp;" + parentText + "&nbsp;" + imgSrc + "</span>" +
										"<span class='auditImgNumber' style='display:none;'>" + imgNumber + "</span>" +
										"<span class='imgCategory' style='display:none;'>" + cateNumber + "</span>" +
										"<span class='imgPath' style='display:none;'>" + src + "</span>" +
										"<span class='pageCode' style='display:none;'>" + pageNumber + "</span>" +
									"</div>" +
								"</li>";
					}
					$("#PicturePreviewSlider").html(html);
					slider(); //渲染特效  
					
				/* 	for (var i = 0; i < parentChildren.length; i++) { 
						var src = parentChildren[i].attributes; //图片路径 
						//截取图片路径
						var src2 = src.replace(/\\/g,'/');
						var index = src2.lastIndexOf("/");
						var imgSrc = src2.substring(index+1,src.length);
						
						var srcPath=ctx + "/upload/"+fcode+"/"+imgSrc;
						slider_picpViewer("picpViewer"+i,srcPath); 
					}   */
				} 
				else{
					$.messager.alert("提示","解密图片操作异常,请联系管理员！","info");
				}
				
			},
			error:function(){
				$.messager.alert("提示","解密图片操作异常,请联系管理员！","info");
			}
			
		});
	}
	
</script>
</body>
</html>